<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>method实现姓名案例</title>
  <div id='root'>
    姓<input type="text" v-model="firstName">
    名<input type="text" v-model="lastName">
    <h2>{{ fullName() }}</h2>
  </div>
</head>
<body>
<script type="text/javascript" src="../js/vue.js"></script>
<script>
   // 设置为 false 以阻止 vue 在启动时生成生产提示。
   Vue.config.productionTip = false
  // 创建一个vue实例
  new Vue({
    // el -> element 用于指定当前vue对象绑定哪个容器,值通常为css选择器字符串
    el: '#root',
    // data 用于存储数组,数据供el所指定的容器去使用 
    data: {
      firstName: '李',
      lastName: 'cj',
    },
    methods: {
       fullName() {
          let fullName = this.firstName.slice(0,3) + '-' + this.lastName.slice(0,3);
          return fullName;
       }
    },
  });
</script>
</body>
</html>